<template>
  <div id="app" class="page-video">
    <div class="video-page">
      <div class="switch-tab-bar">
        <router-link v-for="(i,index) in barinfo" :key="index" :to="'/Theater/'+i.type">
          <div @click="changecurrent(index)" class="tab-item" :class="index===current?'active':''">
            <h2 class="">{{i.name}}</h2>
          </div>
        </router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<style scoped>
html{
    font-size: 50px;
}
.switch-tab-bar {
    width: 100%;
    display: flex;
    /* justify-content: space-around; */
    height: .9rem;
    line-height: .9rem;
    position: relative;
    white-space: nowrap;
    overflow: scroll;
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
}
.switch-tab-bar a {
    flex: 1;
    text-decoration: none;
}
.tab-item {
    color: #666;
    height: .9rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 .25rem;
}
.tab-item h2 {
    font-size: .3rem;
    line-height: .42rem;
    font-weight: 400;
}
/* .color{
  color: #333;
} */
 .active {
    font-size: .35rem;
    font-weight: 700;
    color: #333;
}
.tab-item.active h2 {
    font-size: .34rem;
    line-height: .48rem;
    font-weight: 450;
}
.tab-item.active:after {
    content: "";
    display: block;
    position: absolute;
    bottom: .06rem;
    width: .4rem;
    height: .06rem;
    border-radius: .02rem;
    background: #f03d37;
}
</style>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      current: 0,
      barinfo:[
        {
          name:'热映',
          css:'',
          active:'',
          type:'hotshowing'
        },
        {
          name:'预告',
          css:'',
          active:'',
          type:'foreshow'
        },
        {
          name:'说电影',
          css:'',
          active:'',
          type:'sayfilm'
        },
        {
          name:'佳片',
          css:'',
          active:'',
          type:'goodfilm'
        },
        {
          name:'热播剧',
          css:'',
          active:'',
          type:'hitshow'
        },
        {
          name:'盘点',
          css:'',
          active:'',
          type:'check'
        },
        {
          name:'娱乐圈',
          css:'',
          active:'',
          type:'circle'
        },
        {
          name:'悬疑',
          css:'',
          active:'',
          type:'suspensefilm'
        },
        {
          name:'科幻',
          css:'',
          active:'',
          type:'sciencefilm'
        },
        {
          name:'爱情',
          css:'',
          active:'',
          type:'lovefilm'
        },
        {
          name:'奇幻',
          css:'',
          active:'',
          type:'strange'
        },
      ],
    };
  },
  mounted() {
    this.topbarhide();
  },
  methods: {
    // routersend (type) {
    //    this.$router.push(`/Theater/${type}`)
    // },
    changecurrent (index) {
      this.current = index
    },
    ...mapMutations("Showhidebar", [
      "toplogohide",
      "topbarhide",
      "buttomhide",
      "toplogoshow",
      "topbarshow",
      "buttomshow",
    ]),
  },
  beforeDestroy() {
    this.topbarshow();
  },

};
</script>
